<template>
<div>
  <div class="title">
    <span>欢迎注册知晓</span>
  </div>
  <div class="reg">
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item v-bind="formItemLayout" label="邮箱">
        <a-input
            v-decorator="[
          'email',
          {
            rules: [
              {
                type: 'email',
                message: '请输入正确的邮箱格式!',
              },
              {
                required: true,
                message: '请输入你的邮箱!',
              },
            ],
          },
        ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
        <a-input
            v-decorator="[
          'password',
          {
            rules: [
              {
                required: true,
                message: '请输入你的密码!',
              },
              {
                validator: validateToNextPassword,
              },
            ],
          },
        ]"
            type="password"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="再次确认" has-feedback>
        <a-input
            v-decorator="[
          'confirm',
          {
            rules: [
              {
                required: true,
                message: 'Please confirm your password!',
              },
              {
                validator: compareToFirstPassword,
              },
            ],
          },
        ]"
            type="password"
            @blur="handleConfirmBlur"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout">
      <span slot="label">
        用户名&nbsp;
        <a-tooltip title="你想被人怎么称呼你">
          <a-icon type="question-circle-o" />
        </a-tooltip>
      </span>
        <a-input
            v-decorator="[
          'nickname',
          {
            rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
          },
        ]"
        />
      </a-form-item>

      <a-form-item  v-bind="formItemLayout" label="手机号码">
        <a-input v-model="phonenum"

            style="width: 100%"
        >
          <a-select
              slot="addonBefore"
              v-decorator="['prefix', { initialValue: '86' }]"
              style="width: 70px"
          >
            <a-select-option value="86">
              +86
            </a-select-option>
            <a-select-option value="87">
              +87
            </a-select-option>
          </a-select>
        </a-input>
      </a-form-item>

      <a-form-item
          v-bind="formItemLayout"
          label="验证码"
          extra="我们需要确保你是本人!"
      >
        <a-row :gutter="8">
          <a-col :span="12">
            <a-input
                v-decorator="[
              'captcha',
              { rules: [{ required: true, message: '请输入你获得的验证码!' }] },
            ]"
            />
          </a-col>
          <a-col :span="12">
            <a-button @click="getnumber">获取验证码</a-button>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item v-bind="tailFormItemLayout">
        <a-checkbox v-decorator="['agreement', { valuePropName: 'checked' }]">
          我同意注册知晓!
        </a-checkbox>
      </a-form-item>
      <a-form-item v-bind="tailFormItemLayout">
        <a-button type="primary" html-type="submit">
          注册
        </a-button>
        <a-button style="margin-left: 40px">
          <router-link to="/login">返回</router-link>
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</div>
</template>

<script>
import {userRegis} from "@/api/api";
import {phone} from "@/api/api";
import { Notify } from 'vant'
const residences = [
];
export default {
name: "register",
  data() {
    return {
      phonenum:'',
      userinfo: {},
      confirmDirty: false,
      residences,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'register' });
  },
  methods: {
    getnumber(){
      // console.log(this)
      console.log(this.phonenum)
      phone(this.phonenum).then(res=>{
        console.log(res)
      })
      // console.log(this.formItemLayout)
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          userRegis(this.phonenum,values.captcha,this.phonenum,values.password,values.nickname).then(res=>{
            console.log(res)
            if(res.code==0){
              Notify({ type: 'success', message: '知晓天下,欢迎您' });
              setTimeout(()=>{this.$router.push("/login")},1500)
            }else{
              Notify({ type: 'danger', message: '注册失败' });
            }
          })
        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue('password')) {
        callback('Two passwords that you enter is inconsistent!');
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true });
      }
      callback();
    },
    handleWebsiteChange(value) {
      let autoCompleteResult;
      if (!value) {
        autoCompleteResult = [];
      } else {
        autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
      }
      this.autoCompleteResult = autoCompleteResult;
    },
  },
}
</script>

<style scoped lang="less">
.title{
  height: calc(100vh / 5);
  line-height: calc(100vh / 5);
  text-align: center;
  span{
    font-size: 30px;
    color: #ffbf00;
  }
}


.reg {
  width: 80%;
  margin: auto;
}
</style>